import { useState, useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { Image, Avatar, Button, Tag, Popup, Card } from 'tdesign-react'
import {
  PlayRectangleIcon, ArticleIcon, MinusCircleIcon,
  ThumbUp2Icon, StopCircleStrokeIcon, StarIcon,
  Share1Icon,
  ThumbUp1Icon,
  ThumbDown1Icon,
} from 'tdesign-icons-react'
import { FormatNumber } from '@/utils/common'
import styles from './index.module.less'
import moment from 'moment'
import VideoItem from '@/apps/bilibili/components/VideoItem'
import FlipAnimation from '@/apps/bilibili/components/FlipAnimation'
import { getSexIcon, getLvIcon } from '@/apps/bilibili/utils/GetUserInfoIcon'
import SafeRenderHtml from '@/components/SafeRenderHtml'
import UpCard from '../../components/UpCard'
import { ApiRequest, apis } from '@/service'

const {
  video: {
    getVideoDetail,
    getRecommendVideo,
  },
  reply: {
    getVideoReply
  },
} = apis.BilibiliService
const PlayVideo = (props: any) => {

  const navigate = useNavigate()
  const { state: { aid } } = useLocation()
  const [videoInfo, setVideoInfo] = useState<any>({})
  const [videoReply, setVideoReply] = useState<any>({})
  const [curVideoId, setCurVideoId] = useState<any>(aid)

  useEffect(() => {
    getVideoDetailFnc(curVideoId)
    getVideoReplyFnc()
  }, [curVideoId])

  const getVideoDetailFnc = (aid: any) => {
    // TODO：获取视频详情
    const params = {
      aid
    }
    ApiRequest({ api: getVideoDetail, params }).then((res: any) => {
      console.log(res)
      setVideoInfo(res.data)
    })
  }
  const getVideoReplyFnc = () => {
    // TODO：获取视频评论
    const params = {
      type: 1,
      oid: aid,
    }
    ApiRequest({api: getVideoReply, params}).then((res:any) => {
      console.log('getVideoReplyFnc', res)
      setVideoReply(res.data)
    })
    // let _data = {
    //   "cursor": {
    //     "is_begin": true,
    //     "prev": 71880,
    //     "next": 71859,
    //     "is_end": false,
    //     "mode": 2,
    //     "mode_text": "",
    //     "all_count": 86234,
    //     "support_mode": [
    //       2,
    //       3
    //     ],
    //     "name": "最新评论",
    //     "pagination_reply": {
    //       "next_offset": "{\"type\":3,\"direction\":1,\"Data\":{\"cursor\":71859}}"
    //     },
    //     "session_id": ""
    //   },
    //   "replies": [
    //     {
    //       "rpid": 237740291920,
    //       "oid": 2,
    //       "type": 1,
    //       "mid": 1201423076,
    //       "root": 0,
    //       "parent": 0,
    //       "dialog": 0,
    //       "count": 0,
    //       "rcount": 0,
    //       "state": 0,
    //       "fansgrade": 0,
    //       "attr": 0,
    //       "ctime": 1723639342,
    //       "mid_str": "1201423076",
    //       "oid_str": "2",
    //       "rpid_str": "237740291920",
    //       "root_str": "0",
    //       "parent_str": "0",
    //       "dialog_str": "0",
    //       "like": 0,
    //       "action": 0,
    //       "member": {
    //         "mid": "1201423076",
    //         "uname": "天堂いyoulin",
    //         "sex": "保密",
    //         "sign": "",
    //         "avatar": "https://i2.hdslb.com/bfs/face/d0925e782198cadc0c400a3ed4fbdf94142357fb.jpg",
    //         "rank": "10000",
    //         "face_nft_new": 0,
    //         "is_senior_member": 0,
    //         "senior": {},
    //         "level_info": {
    //           "current_level": 4,
    //           "current_min": 0,
    //           "current_exp": 0,
    //           "next_exp": 0
    //         },
    //         "pendant": {
    //           "pid": 0,
    //           "name": "",
    //           "image": "",
    //           "expire": 0,
    //           "image_enhance": "",
    //           "image_enhance_frame": "",
    //           "n_pid": 0
    //         },
    //         "nameplate": {
    //           "nid": 0,
    //           "name": "",
    //           "image": "",
    //           "image_small": "",
    //           "level": "",
    //           "condition": ""
    //         },
    //         "official_verify": {
    //           "type": -1,
    //           "desc": ""
    //         },
    //         "vip": {
    //           "vipType": 0,
    //           "vipDueDate": 0,
    //           "dueRemark": "",
    //           "accessStatus": 0,
    //           "vipStatus": 0,
    //           "vipStatusWarn": "",
    //           "themeType": 0,
    //           "label": {
    //             "path": "",
    //             "text": "",
    //             "label_theme": "",
    //             "text_color": "",
    //             "bg_style": 0,
    //             "bg_color": "",
    //             "border_color": "",
    //             "use_img_label": true,
    //             "img_label_uri_hans": "",
    //             "img_label_uri_hant": "",
    //             "img_label_uri_hans_static": "https://i0.hdslb.com/bfs/vip/d7b702ef65a976b20ed854cbd04cb9e27341bb79.png",
    //             "img_label_uri_hant_static": "https://i0.hdslb.com/bfs/activity-plat/static/20220614/e369244d0b14644f5e1a06431e22a4d5/KJunwh19T5.png"
    //           },
    //           "avatar_subscript": 0,
    //           "nickname_color": ""
    //         },
    //         "fans_detail": null,
    //         "user_sailing": {
    //           "pendant": null,
    //           "cardbg": null,
    //           "cardbg_with_focus": null
    //         },
    //         "user_sailing_v2": {},
    //         "is_contractor": false,
    //         "contract_desc": "",
    //         "nft_interaction": null,
    //         "avatar_item": {
    //           "container_size": {
    //             "width": 1.8,
    //             "height": 1.8
    //           },
    //           "fallback_layers": {
    //             "layers": [
    //               {
    //                 "visible": true,
    //                 "general_spec": {
    //                   "pos_spec": {
    //                     "coordinate_pos": 2,
    //                     "axis_x": 0.9,
    //                     "axis_y": 0.9
    //                   },
    //                   "size_spec": {
    //                     "width": 1,
    //                     "height": 1
    //                   },
    //                   "render_spec": {
    //                     "opacity": 1
    //                   }
    //                 },
    //                 "layer_config": {
    //                   "tags": {
    //                     "AVATAR_LAYER": {}
    //                   },
    //                   "is_critical": true,
    //                   "layer_mask": {
    //                     "general_spec": {
    //                       "pos_spec": {
    //                         "coordinate_pos": 2,
    //                         "axis_x": 0.9,
    //                         "axis_y": 0.9
    //                       },
    //                       "size_spec": {
    //                         "width": 1,
    //                         "height": 1
    //                       },
    //                       "render_spec": {
    //                         "opacity": 1
    //                       }
    //                     },
    //                     "mask_src": {
    //                       "src_type": 3,
    //                       "draw": {
    //                         "draw_type": 1,
    //                         "fill_mode": 1,
    //                         "color_config": {
    //                           "day": {
    //                             "argb": "#FF000000"
    //                           }
    //                         }
    //                       }
    //                     }
    //                   }
    //                 },
    //                 "resource": {
    //                   "res_type": 3,
    //                   "res_image": {
    //                     "image_src": {
    //                       "src_type": 1,
    //                       "placeholder": 6,
    //                       "remote": {
    //                         "url": "https://i2.hdslb.com/bfs/face/d0925e782198cadc0c400a3ed4fbdf94142357fb.jpg",
    //                         "bfs_style": "widget-layer-avatar"
    //                       }
    //                     }
    //                   }
    //                 }
    //               }
    //             ],
    //             "is_critical_group": true
    //           },
    //           "mid": "1201423076"
    //         }
    //       },
    //       "content": {
    //         "message": "好多20年和18年的[辣眼睛]",
    //         "members": [],
    //         "emote": {
    //           "[辣眼睛]": {
    //             "id": 2374,
    //             "package_id": 1,
    //             "state": 0,
    //             "type": 1,
    //             "attr": 0,
    //             "text": "[辣眼睛]",
    //             "url": "https://i0.hdslb.com/bfs/emote/35d62c496d1e4ea9e091243fa812866f5fecc101.png",
    //             "meta": {
    //               "size": 1,
    //               "suggest": [
    //                 ""
    //               ]
    //             },
    //             "mtime": 1668688325,
    //             "jump_title": "辣眼睛"
    //           }
    //         },
    //         "jump_url": {},
    //         "max_line": 6
    //       },
    //       "replies": [],
    //       "assist": 0,
    //       "up_action": {
    //         "like": false,
    //         "reply": false
    //       },
    //       "invisible": false,
    //       "reply_control": {
    //         "max_line": 6,
    //         "time_desc": "21分钟前发布",
    //         "location": "IP属地：河北"
    //       },
    //       "folder": {
    //         "has_folded": false,
    //         "is_folded": false,
    //         "rule": ""
    //       },
    //       "dynamic_id_str": "0",
    //       "note_cvid_str": "0",
    //       "track_info": ""
    //     },
    //     {
    //       "rpid": 237689432448,
    //       "oid": 2,
    //       "type": 1,
    //       "mid": 1647250883,
    //       "root": 0,
    //       "parent": 0,
    //       "dialog": 0,
    //       "count": 0,
    //       "rcount": 0,
    //       "state": 0,
    //       "fansgrade": 0,
    //       "attr": 0,
    //       "ctime": 1723624563,
    //       "mid_str": "1647250883",
    //       "oid_str": "2",
    //       "rpid_str": "237689432448",
    //       "root_str": "0",
    //       "parent_str": "0",
    //       "dialog_str": "0",
    //       "like": 1,
    //       "action": 0,
    //       "member": {
    //         "mid": "1647250883",
    //         "uname": "小烟同学424",
    //         "sex": "保密",
    //         "sign": "墓前玩使命，墓前暑假",
    //         "avatar": "https://i2.hdslb.com/bfs/face/930661ca1bcacf8005efcca499b7380dcd4c2716.jpg",
    //         "rank": "10000",
    //         "face_nft_new": 0,
    //         "is_senior_member": 0,
    //         "senior": {},
    //         "level_info": {
    //           "current_level": 5,
    //           "current_min": 0,
    //           "current_exp": 0,
    //           "next_exp": 0
    //         },
    //         "pendant": {
    //           "pid": 0,
    //           "name": "",
    //           "image": "",
    //           "expire": 0,
    //           "image_enhance": "",
    //           "image_enhance_frame": "",
    //           "n_pid": 0
    //         },
    //         "nameplate": {
    //           "nid": 0,
    //           "name": "",
    //           "image": "",
    //           "image_small": "",
    //           "level": "",
    //           "condition": ""
    //         },
    //         "official_verify": {
    //           "type": -1,
    //           "desc": ""
    //         },
    //         "vip": {
    //           "vipType": 0,
    //           "vipDueDate": 0,
    //           "dueRemark": "",
    //           "accessStatus": 0,
    //           "vipStatus": 0,
    //           "vipStatusWarn": "",
    //           "themeType": 0,
    //           "label": {
    //             "path": "",
    //             "text": "",
    //             "label_theme": "",
    //             "text_color": "",
    //             "bg_style": 0,
    //             "bg_color": "",
    //             "border_color": "",
    //             "use_img_label": true,
    //             "img_label_uri_hans": "",
    //             "img_label_uri_hant": "",
    //             "img_label_uri_hans_static": "https://i0.hdslb.com/bfs/vip/d7b702ef65a976b20ed854cbd04cb9e27341bb79.png",
    //             "img_label_uri_hant_static": "https://i0.hdslb.com/bfs/activity-plat/static/20220614/e369244d0b14644f5e1a06431e22a4d5/KJunwh19T5.png"
    //           },
    //           "avatar_subscript": 0,
    //           "nickname_color": ""
    //         },
    //         "fans_detail": null,
    //         "user_sailing": {
    //           "pendant": null,
    //           "cardbg": null,
    //           "cardbg_with_focus": null
    //         },
    //         "user_sailing_v2": {},
    //         "is_contractor": false,
    //         "contract_desc": "",
    //         "nft_interaction": null,
    //         "avatar_item": {
    //           "container_size": {
    //             "width": 1.8,
    //             "height": 1.8
    //           },
    //           "fallback_layers": {
    //             "layers": [
    //               {
    //                 "visible": true,
    //                 "general_spec": {
    //                   "pos_spec": {
    //                     "coordinate_pos": 2,
    //                     "axis_x": 0.9,
    //                     "axis_y": 0.9
    //                   },
    //                   "size_spec": {
    //                     "width": 1,
    //                     "height": 1
    //                   },
    //                   "render_spec": {
    //                     "opacity": 1
    //                   }
    //                 },
    //                 "layer_config": {
    //                   "tags": {
    //                     "AVATAR_LAYER": {}
    //                   },
    //                   "is_critical": true,
    //                   "layer_mask": {
    //                     "general_spec": {
    //                       "pos_spec": {
    //                         "coordinate_pos": 2,
    //                         "axis_x": 0.9,
    //                         "axis_y": 0.9
    //                       },
    //                       "size_spec": {
    //                         "width": 1,
    //                         "height": 1
    //                       },
    //                       "render_spec": {
    //                         "opacity": 1
    //                       }
    //                     },
    //                     "mask_src": {
    //                       "src_type": 3,
    //                       "draw": {
    //                         "draw_type": 1,
    //                         "fill_mode": 1,
    //                         "color_config": {
    //                           "day": {
    //                             "argb": "#FF000000"
    //                           }
    //                         }
    //                       }
    //                     }
    //                   }
    //                 },
    //                 "resource": {
    //                   "res_type": 3,
    //                   "res_image": {
    //                     "image_src": {
    //                       "src_type": 1,
    //                       "placeholder": 6,
    //                       "remote": {
    //                         "url": "https://i2.hdslb.com/bfs/face/930661ca1bcacf8005efcca499b7380dcd4c2716.jpg",
    //                         "bfs_style": "widget-layer-avatar"
    //                       }
    //                     }
    //                   }
    //                 }
    //               }
    //             ],
    //             "is_critical_group": true
    //           },
    //           "mid": "1647250883"
    //         }
    //       },
    //       "content": {
    //         "message": "还。。。有人吗？",
    //         "members": [],
    //         "jump_url": {},
    //         "max_line": 6
    //       },
    //       "replies": [],
    //       "assist": 0,
    //       "up_action": {
    //         "like": false,
    //         "reply": false
    //       },
    //       "invisible": false,
    //       "reply_control": {
    //         "max_line": 6,
    //         "time_desc": "4小时前发布",
    //         "location": "IP属地：陕西"
    //       },
    //       "folder": {
    //         "has_folded": false,
    //         "is_folded": false,
    //         "rule": ""
    //       },
    //       "dynamic_id_str": "0",
    //       "note_cvid_str": "0",
    //       "track_info": ""
    //     }
    //   ],
    //   "top": {
    //     "admin": null,
    //     "upper": null,
    //     "vote": null
    //   },
    //   "top_replies": [],
    //   "up_selection": {
    //     "pending_count": 0,
    //     "ignore_count": 0
    //   },
    //   "effects": {
    //     "preloading": ""
    //   },
    //   "assist": 0,
    //   "blacklist": 0,
    //   "vote": 0,
    //   "config": {
    //     "showtopic": 1,
    //     "show_up_flag": true,
    //     "read_only": false
    //   },
    //   "upper": {
    //     "mid": 2
    //   },
    //   "control": {
    //     "input_disable": false,
    //     "root_input_text": "你渴望拥有力量吗？评论让力量更强大",
    //     "child_input_text": "你渴望拥有力量吗？评论让力量更强大",
    //     "giveup_input_text": "不发没关系，请继续友善哦~",
    //     "screenshot_icon_state": 1,
    //     "upload_picture_icon_state": 1,
    //     "answer_guide_text": "需要升级成为lv2会员后才可以评论，先去答题转正吧！",
    //     "answer_guide_icon_url": "http://i0.hdslb.com/bfs/emote/96940d16602cacbbac796245b7bb99fa9b5c970c.png",
    //     "answer_guide_ios_url": "https://www.bilibili.com/h5/newbie/entry?navhide=1&re_src=12",
    //     "answer_guide_android_url": "https://www.bilibili.com/h5/newbie/entry?navhide=1&re_src=6",
    //     "bg_text": "",
    //     "empty_page": null,
    //     "show_type": 1,
    //     "show_text": "",
    //     "web_selection": false,
    //     "disable_jump_emote": false,
    //     "enable_charged": false,
    //     "enable_cm_biz_helper": false,
    //     "preload_resources": null
    //   },
    //   "note": 1,
    //   "esports_grade_card": null,
    //   "callbacks": null,
    //   "context_feature": ""
    // }
    // setVideoReply(_data)
  }
  const getRelayContent = (item: any) => {
    let message = item.message
    let emote = item.emote
    if (!emote) {
      return message
    }
    let emoteKeys = Object.keys(emote)
    let emoteValues: any[] = Object.values(emote)
    for (let i = 0; i < emoteKeys.length; i++) {
      let regExp = new RegExp(emoteKeys[i].replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')
      message = message.replace(regExp, `<img className="${styles.emote}" src="${emoteValues[i].url}"  alt="暂时无法显示" />`)
    }
    // jump_url 需要高亮的超链转义
    return message
  }
  const renderVideoDesc = (item: any) => {
    if (item.type == 1) {
      return item.raw_text
    } else if (item.type == 2) {
      return <div className={`${styles.boldTitle} ${styles.videoDesc} ${styles.link}`} onClick={() => toDescMentionedCenter(item.biz_id)}>{'@' + item?.raw_text}</div>
    }
  }
  const renderReplyInput = (): ReactNode => {
    //TODO: 登录之后，拿到自己的信息，渲染评论输入框
    return <div className={styles.replyInput}>
      <div className={styles.replyInputLeft}>
        <img className={'bl-avatar'} src={videoInfo.Card?.card?.face} alt="暂时无法显示" />
        <div className={styles.replyInputDesc}>
          <div className={'bl-upName'}>{videoInfo.Card?.card?.name}{getSexIcon(videoInfo.Card?.card?.sex)}{getLvIcon(videoInfo.Card?.card?.level)}</div>
          <div className={styles.replyInputSign}>{videoInfo.Card?.card?.sign}</div>        </div>
      </div>
      <div className={styles.replyInputRight}>
        <div className={styles.replyInputBox}>
          <div className={styles.replyInputContent}>

          </div>
        </div>
      </div>
    </div>
  }
  const renderReplayItem = (item: any, index: any): ReactNode => {
    return <div className={styles.replyItem} key={index}>
      <Popup
        attach={(triggerNode) => triggerNode?.parentNode as any}
        content={<UpCard userId={item.member.mid} />}
        trigger="hover"
        placement="top-right"
        showArrow
        destroyOnClose
        overlayInnerStyle={{ padding: 0, borderRadius: '10px', border: '1px solid #fff' }}
      >
        <img className={'bl-avatar'} src={item.member.avatar} alt="暂时无法显示" onClick={() => toReplierCenter(item.member.mid)} key={index} />
      </Popup>
      <div className={styles.replyInfo}>
        <Popup
          attach={(triggerNode) => triggerNode?.parentNode as any}
          content={<UpCard userId={item.member.mid} />}
          trigger="hover"
          placement="top-right"
          showArrow
          destroyOnClose
          overlayInnerStyle={{ padding: 0, borderRadius: '10px', border: '1px solid #fff' }}
        >
          <div className={'bl-upName'} onClick={() => toReplierCenter(item.member.mid)} key={index}>
            {item.member.uname}{getSexIcon(item.member.sex)}{getLvIcon(item.member.level)}</div>
        </Popup>
        <div className={styles.replyContent}>
          <SafeRenderHtml htmlContent={getRelayContent(item.content)}/>
        </div>
        <div className={`bl-graySmallPrint ${styles.replyTime}`}>
          <div>{moment(item.ctime * 1000).format('YYYY-MM-DD HH:mm:ss')}</div>
          <div className={styles.replyAction} onClick={toUpReply}><ThumbUp1Icon />{FormatNumber(item.like)}</div>
          <div className={styles.replyAction} onClick={toDownReply}><ThumbDown1Icon /></div>

        </div>
      </div>
    </div>
  }
  const toCancelFollow = () => {
    // TODO：取消关注
  }
  const toFollow = () => {
    // TODO：关注
  }
  const toSearchTag = (tagItem: any) => {
    // TODO：搜索Tag
  }
  const toChangeStat = (statItem: number) => {
    // TODO：[点赞，投币，收藏] +1
  }
  const toCopyLink = () => {
    // TODO：复制链接
  }
  const toUpReply = () => {
    // TODO：点赞评论
  }
  const toDownReply = () => {
    // TODO：点踩评论
  }
  const toReplierCenter = (mid: any) => {
    navigate('/aio/bilibili/user', {
      state: {
        mid
      }
    })
  }
  const toDescMentionedCenter = (biz_id: any) => {
    navigate('/aio/bilibili/user', {
      state: {
        mid: biz_id
      }
    })
  }
  const onAuthorClick = (item: any) => {
    //TODO跳转到作者主页
    navigate('/aio/bilibili/user', {
      state: {
        mid: item.owner.mid
      }
    })
  }
  const onVideoClick = (item: any) => {
    setCurVideoId(item.aid)
  }
  return <div className={styles.playVideo}>

    <div className={styles.videoLeft}>
      {/* 标题 + 信息 */}
      <h1>{videoInfo.View?.title}</h1>
      <div className={styles.desc}>
        <div className={'bl-graySmallPrint'}>
          <PlayRectangleIcon style={{ marginRight: 5, paddingBottom: 2 }} />
          {FormatNumber(videoInfo.View?.stat?.view)}
        </div>
        <div className={'bl-graySmallPrint'}>
          <ArticleIcon style={{ marginRight: 5, paddingBottom: 2 }} />
          {FormatNumber(videoInfo.View?.stat?.reply)}
        </div>
        <div className={'bl-graySmallPrint'}>
          {moment(videoInfo.View?.pubdate * 1000).format('YYYY-MM-DD HH:mm:ss')}
        </div>
        <div className={'bl-graySmallPrint'}>
          {videoInfo.View?.copyright == 1 ? <><MinusCircleIcon style={{ marginRight: 3, paddingBottom: 3, color: '#cf5d5d' }} />未经作者授权，禁止转载</>
            : null}
        </div>
      </div>

      {/* 视频 */}
      <div className={styles.video}>
        <Image src={videoInfo.View?.pic} />
      </div>

      {/* 视频操作 */}
      <div className={styles.stat}>
        <div className={styles.statItem} onClick={() => { toChangeStat(0) }}>
          <ThumbUp2Icon style={{ marginRight: 5, paddingBottom: 3 }} /> {FormatNumber(videoInfo.View?.stat?.like)}</div>
        <div className={styles.statItem} onClick={() => { toChangeStat(0) }}>
          <StopCircleStrokeIcon style={{ marginRight: 5, paddingBottom: 3 }} /> {FormatNumber(videoInfo.View?.stat?.coin)}</div>
        <div className={styles.statItem} onClick={() => { toChangeStat(0) }}>
          <StarIcon style={{ marginRight: 5, paddingBottom: 3 }} /> {FormatNumber(videoInfo.View?.stat?.favorite)}</div>
        <div className={styles.statItem} onClick={toCopyLink}>
          <Share1Icon style={{ marginRight: 5, paddingBottom: 3 }} />
          <div className={styles.shareAnimation}><FlipAnimation normalItem={FormatNumber(videoInfo.View?.stat?.share)} hoverItem={'点击复制链接'} /></div>
        </div>
      </div>
      {/* 视频描述 */}

      <div className={`${styles.boldTitle} ${styles.videoDesc}`}>
        {videoInfo.View?.desc_v2 ? renderVideoDesc(videoInfo.View?.desc_v2[0]) : <div>{videoInfo.View?.desc}</div>}
      </div>
      <div className={styles.tags}>
        {videoInfo.Tags?.map((item: any, index: any) => {
          return <Tag
            key={index}
            shape="round"
            size="medium"
            theme="default"
            variant="dark"
            onClick={() => { toSearchTag(item) }}>{item['tag_name']}</Tag>
        })}
      </div>
      {/* 评论区 */}
      <div className={styles.replyTitle}>
        {'评论'}
        <div className={`bl-graySmallPrint ${styles.replyCount}`}>{videoReply?.replies?.length}</div>
      </div>
      <div></div>
      <div className={styles.replyBlock}>
        {videoReply?.replies?.map((item: any, index: any) => { return renderReplayItem(item, index) })}
      </div>
    </div>

    <div className={styles.videoRight}>

      {/* 用户信息 + 关注按钮 */}
      <div className={`bl-upCardBlock ${styles.upItem}`}>
        <Popup
          attach={(triggerNode) => triggerNode?.parentNode as any}
          content={<UpCard upInfo={videoInfo.Card} />}
          trigger="hover"
          placement="bottom"
          showArrow
          destroyOnClose
          overlayInnerStyle={{ padding: 0, borderRadius: '10px', border: '1px solid #fff' }}
        >
          <img className={'bl-avatar'} src={videoInfo.Card?.card?.face} alt="暂时无法显示" />
        </Popup>
        <div className={`bl-upDesc`}>
          <div className={'bl-upName'}>{videoInfo.Card?.card?.name}</div>
          <div className={`bl-graySmallPrint ${styles.ellipsis}`}>{videoInfo.Card?.card?.sign}</div>
          {/**验证登录 */}
          {videoInfo.Card?.following ? <Button style={{ width: 120 }} onClick={toCancelFollow}>{`关注 ${FormatNumber(videoInfo.Card?.follower)}`}</Button> :
            <Button style={{ width: 120 }} onClick={toFollow} theme="default" variant="base" >{`取消关注 ${FormatNumber(videoInfo.Card?.follower)}`}</Button>}
        </div>
      </div>

      {/* 推荐视频 */}
      <div className={styles.nextVideoList}>
        <div className={styles.boldTitle}>{'接下来播放'}</div>
        {videoInfo.Related?.map((item: any, index: any) => {
          return <VideoItem key={index} videoItem={item} direction={'horizontal'} onAuthorClick={onAuthorClick} onVideoClick={onVideoClick} />
        })}
      </div>
    </div>
  </div>
}

export default PlayVideo
